<template>
 <div id='app'>
    <div class="hed">
        <van-nav-bar
        title="城市选择"
        left-arrow
        @click-left="onClickLeft"
        />
    </div>
  <!-- <van-index-bar>
  <view>
    <van-index-anchor v-for="(item, index) in list" :key="index" index='`$(item.name)`' />
    <van-cell v-for="(itm,index) in item.content" title='`$(item.label)`' :key="index"/>
  </view>
</van-index-bar> -->
<van-index-bar>
  <div v-for="(item, index) in list" :key="index">
    <van-index-anchor :index='item.name'/>
   <van-cell v-for="(item1, index) in item.content" :key="index" :title="item1.label" @click='$router.push("/findhome?value="+item1.value+"&"+"name="+item1.label)'/>
  </div>
</van-index-bar>
 </div>
</template>

<script>
import { citylist } from '../api/user'
export default {
  data () {
    return {
      arr: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i',
        'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'y', 'v', 'w', 'x', 'y', 'z'],
      list: []
    }
  },
  created () {
    this.citylist()
  },
  components: {},

  methods: {
    onClickLeft () {
      this.$router.back()
    },
    async citylist () {
      const { data: res } = await citylist(1)
      console.log(res)
      this.arr.forEach(item => {
        const obj = res.body.filter((item1) => {
          return item1.short.substring(0, 1) === item
        })
        if (obj.length > 0) {
          this.list.push({
            name: item.toLocaleUpperCase(),
            content: obj
          })
        }
      })
      console.log(this.list)
    }
  }
}
</script>

<style scoped>
</style>
